<template>
  <div>
    <div class="inputBox">
      <el-date-picker v-model="record.startTime" ref="startTime" type="datetime" size='small' value-format='yyyy-MM-dd HH:mm:ss' :placeholder="$t('起始日期')" :picker-options="startDatePickerOptions" :default-value="defaultStartTime()" style="margin-bottom:10px;"></el-date-picker>
      <el-date-picker v-model="record.endTime" ref="endTime" type="datetime" size='small' value-format='yyyy-MM-dd HH:mm:ss':placeholder="$t('结束日期')" :picker-options="endDatePickerOptions" :default-value="defaultEndTime()" style="margin-bottom:10px;"></el-date-picker>
      <el-input v-emoji v-model="record.srcIp" ref="srcIp" style="width:217px;margin-bottom:10px;" size='small' :placeholder="$t('源IP')"></el-input>
      <el-input v-emoji v-model="record.dstIp" ref="dstIp" style="width:217px;margin-bottom:10px;" size='small' :placeholder="$t('目的IP')"></el-input>
      <div class="AnalysisFatherBox">
        <span>{{$t('所属协议：')}}</span>
        <el-select v-model="record.type" ref='recordType' :placeholder="$t('所属协议')" size='small' filterable style="width:145px;margin-bottom:10px;" @change="typeChange">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="success" size='small' @click="listData()" class="finds">{{$t('搜索')}}</el-button>
        <el-switch :width="lang === 'zh'?110:150" v-model="analysisType" class="analysisType switch" @change='changePolicyMode' active-color="#009966" inactive-color="#CCCCCC" active-value="ON" inactive-value="OFF" :active-text="$t('开启数据分析')" :inactive-text="$t('关闭数据分析')"></el-switch>
        <el-button type="success" size='small' @click="createAnalysisClick()" style="margin-left: 10px;" class="strategy">{{$t('生成策略')}}</el-button>
      </div>
    </div>
    <!-- iec104 -->
    <el-table ref="multipleTable" key="multipleTableIec104" v-if="record.type === 'iec104'" size='mini' :data="analysisList" tooltip-effect="dark" style="width: 100%" :height="tableHeight" @sort-change='sortChange' @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="ID" align='center' label="ID" width="60" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="90" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="90" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="type" align='center' :label="$t('消息帧')" min-width="80">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="func" align='center' :label="$t('功能码')" min-width="90" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.func" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="transfer_reason" align='center' :label="$t('传送原因')" min-width="140" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.transfer_reason" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="information_object_address" align='center' min-width="140" :label="$t('信息对象地址')" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.information_object_address" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="common_address" align='center' :label="$t('公共地址')" min-width="90" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.common_address" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('数据值')" min-width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- modbus -->
    <el-table ref="multipleTable" key="multipleTableModbus" v-if="record.type === 'modbus'" size='mini' :data="analysisList" tooltip-effect="dark" style="width: 100%" :height="tableHeight" @sort-change='sortChange' @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="func" align='center' :label="$t('功能码')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.func" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dev_addr" align='center' :label="$t('设备地址')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dev_addr" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_read_addr_start" align='center' :label="$t('读寄存器起始地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_read_addr_start" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_read_addr_end" align='center' :label="$t('读寄存器结束地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_read_addr_end" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_write_addr_start" align='center' :label="$t('写寄存器起始地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_write_addr_start" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_write_addr_end" align='center' :label="$t('写寄存器结束地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_write_addr_end" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('数据值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :html="modbusValueRangeFormatter(scope.row)" :copyText="modbusValueRangeFormatter(scope.row)" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- opc -->
    <el-table ref="multipleTable" key="multipleTableOpc" v-if="record.type === 'opc'" size='mini' :data="analysisList" tooltip-effect="dark" style="width: 100%" :height="tableHeight" @sort-change='sortChange' @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="uuid" align='center' label="UUID" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.uuid" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="opnum" align='center' label="opnum" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.opnum" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="tag_name" align='center' :label="$t('点名')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.tag_name" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value_type" align='center' :label="$t('数据类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value_type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('数据值')" min-width="100" sortable='custom' :formatter="valueFormatter"></el-table-column>
    </el-table>
    <!-- s7 -->
    <el-table ref="multipleTable" key="multipleTableS7" v-if="record.type === 's7'" size='mini' :data="analysisList" tooltip-effect="dark" style="width: 100%" :height="tableHeight" @sort-change='sortChange' @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="func" align='center' :label="$t('功能码')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.func" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="area" align='center' :label="$t('寄存器区间')" min-width="110" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.area" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="db" align='center' :label="$t('DB值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.db" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_addr_start" align='center' :label="$t('读寄存器起始地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_addr_start" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_addr_end" align='center' :label="$t('读寄存器结束地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_addr_end" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="tsize" align='center' :label="$t('数据类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.tsize" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('数据值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- s7300 -->
    <el-table ref="multipleTable" key="multipleTableS7" v-if="record.type === 's7_300_plus'" size='mini' :data="analysisList" tooltip-effect="dark" style="width: 100%" @sort-change='sortChange' @selection-change="handleSelectionChange" :height="tableHeight">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="access_mode" align='center' :label="$t('访问类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="accessModeList[scope.row.access_mode] || scope.row.access_mode" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="func" align='center' :label="$t('读写属性')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.func" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="area" align='center' :label="$t('寄存器区间')" min-width="110" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.area" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="db_num" align='center' :label="$t('DB值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.db_num" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="start_addr" align='center' :label="$t('寄存器起始地址')" min-width="110" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.start_addr" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="end_addr" align='center' :label="$t('寄存器结束地址')" min-width="110" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.end_addr" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="value" align='center' :label="$t('绝对访问')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value" class="wid190">
          </tooltip>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- opcua -->
    <el-table ref="multipleTable" key="multipleTableS7" v-if="record.type === 'opcua'" size='mini' :data="analysisList" tooltip-effect="dark" style="width: 100%" :height="tableHeight" @sort-change='sortChange' @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="msg_type" align='center' :label="$t('消息类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.msg_type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="service_id" align='center' :label="$t('功能码')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.service_id" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="node_id_int" align='center' :label="$t('节点名称')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.node_id_int" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="data_type" align='center' :label="$t('数据类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.data_type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { getArray, getStatus, setStatus, createAnalysis } from '@/api/safe/analysis'
import { inputClass, selectClass } from '@/utils/input-class.js'
export default {
  name: 'AnalysisList',
  data () {
    return {
      analysisList: [],
      analysisType: 'OFF',
      record: {
        type: 'iec104',
        startTime: '',
        endTime: '',
        srcIp: '',
        dstIp: '',
        sort: 'time',
        order: 'desc',
        page: 1,
        limit: 20
      },
      idsList: {
        iec104: [],
        modbus: [],
        s7: [],
        s7_300_plus: [],
        opc: [],
        // ab: [],
        // ge: [],
        opcua: []
      },
      total: 0,
      typeList: [
        { value: 'iec104', label: 'iec104' },
        { value: 'modbus', label: 'modbus' },
        { value: 'opc', label: 'opc' },
        { value: 's7', label: 's7' },
        { value: 's7_300_plus', label: 's7_300_plus' },
        // { value: 'ab', label: 'ab' },
        // { value: 'ge', label: 'ge' },
        { value: 'opcua', label: 'opc ua' }
      ],
      rangeList: {
        '0': this.$t('关'),
        '1': this.$t('开'),
        '2': this.$t('开关')
      },
      valueRange: {
        '2-0': this.$t('开关'),
        '1-0': this.$t('开'),
        '0-0': this.$t('关')
      },
      TLPList: {
        '6': 'TCP',
        '17': 'UDP'
      },
      accessModeList: {
        'absolute_access': this.$t('绝对访问'),
        'character_access': this.$t('字符访问')
      },
      selectHeight: 84,
      lang: this.$i18n.locale,
      inputHeight: 84,
      flag: true,
      startDatePickerOptions: {
        disabledDate: (time) => {
          if (this.record.endTime) {
            return time > new Date(this.record.endTime).getTime()
          }
        }
      },
      endDatePickerOptions: {
        disabledDate: (time) => {
          if (this.record.startTime) {
            return time <= (new Date(this.record.startTime).getTime() - (24 * 60 * 60 * 1000))
          }
        }
      }
    }
  },
  computed: {
    tableHeight () {
      return window.innerHeight - 165 - this.inputHeight - this.selectHeight
    }
  },
  mounted () {
    this.listData()
    this.$nextTick(() => {
      const data = ['srcIp', 'dstIp']
      const selectData = ['recordType', 'endTime', 'startTime']
      inputClass(this.$refs, data)
      selectClass(this.$refs, selectData)
    })
    getStatus().then(res => {
      if (res.status === 0) {
        this.analysisType = res.info[0].status
      }
    })
    this.inputHeight = `${document.getElementsByClassName('inputBox')[0].clientHeight}`// 默认值
    this.selectHeight = `${document.getElementsByClassName('AnalysisFatherBox')[0].clientHeight}`// 默认值
    const that = this
    window.addEventListener('resize', function () {
      // 动态赋值
      that.inputHeight = document.getElementsByClassName('inputBox')[0].clientHeight
      that.selectHeight = document.getElementsByClassName('AnalysisFatherBox')[0].clientHeight
    })
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.record.limit = val
      this.record.page = 1
      this.listData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.record.page = val
      this.listData()
    },
    // 列表
    listData () {
      if (this.record.srcIp && !this.isValidIP(this.record.srcIp) && !this.isValidIPv6(this.record.srcIp)) {
        this.$messages.error(this.$t('源IP格式错误'))
        return
      } else if (this.record.dstIp && !this.isValidIP(this.record.dstIp) && !this.isValidIPv6(this.record.dstIp)) {
        this.$messages.error(this.$t('目的IP格式错误'))
        return
      }
      getArray(this.record).then(res => {
        if (res.status === 0) {
          this.total = res.info.count
          this.analysisList = res.info.data
          this.flag = false
          this.$nextTick(() => {
            this.flag = true
            if (this.idsList[this.record.type].length > 0) {
              let ids = this.idsList[this.record.type]
              for (let item of this.analysisList) {
                if (ids.includes(item.ID)) {
                  this.$refs.multipleTable.toggleRowSelection(item, true)
                }
              }
            }
          })
        }
      })
    },
    valueFormatter (data) {
      if (data.value_type === 'BOOL') {
        return this.rangeList[data.value]
      } else {
        return data.value
      }
    },
    modbusValueRangeFormatter (row) {
      if (row.func && row.value_s && row.func.split(' ')[0] === '15') {
        return this.valueRange[row.value_s.trim()]
      } else {
        return row.value
      }
    },
    changePolicyMode (data) {
      setStatus({ status: data }).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t(res.msg))
          this.listData()
        }
      }).catch(() => {
        this.analysisType = data === 'on' ? 'off' : 'on'
      })
    },
    sortChange (data) {
      if (data.order) {
        this.record.sort = data.column.property
      } else {
        this.record.sort = 'time'
      }
      this.record.order = data.order === 'ascending' ? 'asc' : 'desc'
      this.listData()
    },
    typeChange () {
      this.total = 0
      this.analysisList = []
      this.record.sort = 'time'
      this.record.order = 'desc'
      this.record.page = 1
      this.flag = false
      this.listData()
    },
    createAnalysisClick () {
      for (let item in this.idsList) {
        if (this.idsList[item].length > 0) {
          let form = {
            iec104Ids: this.idsList.iec104.join(','),
            modbusIds: this.idsList.modbus.join(','),
            s7Ids: this.idsList.s7.join(','),
            s7_300_plusIds: this.idsList.s7_300_plus.join(','),
            opcIds: this.idsList.opc.join(','),
            // abIds: this.idsList.ab.join(','),
            // geIds: this.idsList.ge.join(','),
            opcuaIds: this.idsList.opcua.join(',')
          }
          createAnalysis(form).then(res => {
            if (res.status === 0) {
              this.$messages.success(this.$t('生成策略成功'))
            }
          })
          return
        }
      }
      this.$messages.error(this.$t('请至少选择一条会话！'))
    },
    handleSelectionChange (data) {
      if (data && this.flag) {
        this.idsList[this.record.type] = []
        for (let item of data) {
          this.idsList[this.record.type].push(item.ID)
        }
      } else {
        this.flag = true
      }
    },
    isValidIP (ip) {
      let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      return reg.test(ip)
    },
    // 验证ipv6
    isValidIPv6 (ip) {
      let reg = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
      // let reg = /^\s*((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?\s*$/
      return reg.test(ip)
    },
    defaultEndTime () {
      if (this.record.startTime && new Date(this.record.startTime).getTime() > new Date().getTime()) {
        return this.record.startTime
      } else {
        return new Date()
      }
    },
    defaultStartTime () {
      if (this.record.endTime && new Date(this.record.endTime).getTime() < new Date().getTime()) {
        return this.record.endTime
      } else {
        return new Date()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.AnalysisFatherBox {
  .defineSwitch {
    width: 105px;
    margin-left: 10px;
    margin-bottom: 5px;
  }

  .defineSwitch.ivu-switch-large.ivu-switch-checked:after {
    left: 84px !important;
  }

  .ivu-switch-checked {
    border-color: #5fb878;
    background-color: #5fb878;
  }

  .el-switch {
    margin-left: 10px;
  }
}
</style>
